<template>
    <div>
        <!--分期数据详情展示-->
        <div>
                <!--
                    label	显示的标题
                    prop	对应列内容的字段名，也可以使用 property 属性
                -->
                <el-table
                        :data="RepaymentList"
                        border
                        :row-style="selectedstyle"
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="rRepaymentTime"
                            label="还款日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="rUid"
                            label="用户标识"
                            width="260">
                    </el-table-column>
                    <el-table-column
                            prop="rNum"
                            label="期数"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="rOwingPrincipal"
                            label="当期欠款本金"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="rOwingInterest"
                            label="当期欠款利息"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="rOwingMoney"
                            label="当期欠款总额"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="rPrincipalRepaid"
                            label="当期已还本金"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="rInterestRepaid"
                            label="当期已还利息"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="rOverdueDays"
                            label="逾期天数"
                            width="120"
                            :formatter="methodtype">
                    </el-table-column>
                    <el-table-column
                            prop="rOverdueCharge"
                            label="逾期罚息"
                            width="120"
                            :formatter="methodtype">
                    </el-table-column>

                    <el-table-column
                            prop="rRepaymentStatus"
                            label="本期是否结清"
                            width="120"
                            :formatter="rRepaymentStatustype">
                    </el-table-column>

                </el-table>
        </div>
        <!--分页模块-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10,20,30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PayBack",
        data(){
            return{
                RepaymentList:[],//分期详情
                pageNum: 1,
                pageSize: 10,
                total:0,//共多少条
            }
        },
        methods:{
            //根据信息来渲染不同的布局属性
            selectedstyle ({row, rowIndex}) {
                if(row.rRepaymentStatus==1){
                    return {
                        "background-color": "#ABEA7F"
                    };
                }else if(row.rRepaymentStatus==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }
            },
            rRepaymentStatustype(row, column, cellValue) {
                if (cellValue == 1) {
                    return '结清';
                } else if (cellValue == 0) {
                    return '未结清';
                }
            },
            methodtype(row, column, cellValue){
                if (cellValue == ""||cellValue == 0||cellValue==null) {
                    return '暂无信息';
                } else if (cellValue <0) {
                    return '数据异常';
                }
            },
            //查看所有
            findRepaymentList(){
                let url=this.$baseUrl+"repayment/findAll";
                this.$axios.get(url,{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.RepaymentList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total
                    }else {
                        this.$alert("查询失败!")
                    }
                })
            },
            handleSizeChange(size){
                this.pageSize = size;
                this.findRepaymentList();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.findRepaymentList();
            }
        },
        created(){
            this.findRepaymentList();
        }
    }
</script>

<style scoped>

</style>